import React from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {hasPermissions, renderBoolean} from './utils';
import {PERMISSION} from './constants';
import {PAGE, TABLE} from '../constants';
import routes from './routes';
import styles from './style.css';
import {Card, Row, Col, Table, Button, Spin, Divider, Modal} from 'antd';
import {conventEnumValueToString, formatAmount} from '../utils';
import {currency, partsPriceType, baseDataStatus} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import PWCSelectPanel from './PartWarrantyCategory/SelectPanel';
export class Detail extends React.PureComponent {
    state = {
        loading: false,
        showPanel: false,
    };

    componentDidMount() {
        this.props.init();
        this.ismounted = true;
    }

    componentWillUnmount() {
        this.ismounted = false;
    }

    handleBatch = () => {
        this.setState({
            loading: true
        });
        this.props.onClickBatch().then(success => {
            if(this.ismounted && !success)
                this.setState({
                    loading: false
                });
        });
    };
    
    showPanel = () => {
        this.setState({showPanel: !this.state.showPanel});
    }

    onSelectBatch = (data = {}) => {
        if(data.id && data.id !== this.props.detail.partWarrantyCategoryId)
            this.props.onSelectBatch(data.id);
        this.setState({showPanel: false});
    }
    render() {
        const {options = [], partDutyUnits = [], partServiceProperties = [], partServicePrices = []} = this.props.detail;
        const operations = [];
        if(hasPermissions(this.props.permissions, PERMISSION.update) && hasPermissions(options, PERMISSION.update))
            operations.push(
                <Button key="update" href={`#${routes.update.format(this.props.id)}`} size="small">
                    {this.props.intl.formatMessage({
                        id: 'detail.btn.update',
                        defaultMessage: '编辑'
                    })}
                </Button>
            );
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.column.dutyUnitCode',
                    defaultMessage: '责任单位编号'
                }),
                dataIndex: 'dutyUnitCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.column.dutyUnitName',
                    defaultMessage: '责任单位名称'
                }),
                dataIndex: 'dutyUnitName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.column.isDefault',
                    defaultMessage: '是否首选项'
                }),
                dataIndex: 'isDefault',
                render: text => renderBoolean(text)
            },
        ];

        const propertyColums = [
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.priceColums.brandId',
                    defaultMessage: '品牌'
                }),
                dataIndex: 'brandId',
                render: (text, record) => `(${record.brandCode})${record.brandName}`
            }, {
                title: this.props.intl.formatMessage({
                    id: 'detail.priceColums.dealerId',
                    defaultMessage: '总代'
                }),
                dataIndex: 'dealerId',
                render: (text, record) => `(${record.dealerCode})${record.dealerName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.info.partWarrantyCategory',
                    defaultMessage: '索赔分类标准'
                }),
                dataIndex: 'partWarrantyCategory',
                render: (text, record) => `(${record.partWarrantyCategoryCode})${record.partWarrantyCategoryName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.info.isPreAuthorized',
                    defaultMessage: '是否预授权'
                }),
                dataIndex: 'isPreAuthorized',
                render: text => renderBoolean(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.info.isNeedPicture',
                    defaultMessage: '是否需要索赔照片'
                }),
                dataIndex: 'isNeedPicture',
                render: text => renderBoolean(text)
            },
        ];
        const priceColums = [
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.priceColums.brandId',
                    defaultMessage: '品牌'
                }),
                dataIndex: 'brandId',
                render: (text, record) => `(${record.brandCode})${record.brandName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.priceColums.year',
                    defaultMessage: '年份'
                }),
                dataIndex: 'year',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.priceColums.month',
                    defaultMessage: '月份'
                }),
                dataIndex: 'month',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.priceColums.currency',
                    defaultMessage: '币种'
                }),
                dataIndex: 'currency',
                render: text => conventEnumValueToString(currency, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detail.priceColums.price',
                    defaultMessage: '价格'
                }),
                dataIndex: 'price',
                render: text => formatAmount(text)
            },
        ];
        const pwcColums = [{
            title: this.props.intl.formatMessage({
                id: 'detail.column.remark',
                defaultMessage: '备注'
            }),
            dataIndex: 'remark',
        }];
        return (
            <div className={styles.detail}>

                <Modal key="modal" visible={this.state.showPanel} title={this.props.intl.formatMessage({
                    id: 'dutyUnit.modal.title',
                    defaultMessage: '选择备件索赔分类'
                })} width={1000} maskClosable={false} footer={null} destroyOnClose={true} onCancel={this.showPanel}>
                    <PWCSelectPanel onSelect={this.onSelectBatch} columns={pwcColums} />
                </Modal>
                
                <Spin spinning={this.props.loading || this.state.loading}>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                            id: 'detail.order.title',
                            defaultMessage: '基础数据'
                        })}</Col>
                        <Col className={styles.optionBtn} span={18}>{operations}</Col></Row>}>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.code',
                                    defaultMessage: '备件编号'
                                })}>
                                {this.props.detail.code}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.name',
                                    defaultMessage: '备件名称'
                                })}>
                                {this.props.detail.name}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.description',
                                    defaultMessage: '英文描述'
                                })}>
                                {this.props.detail.description}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.partCategoryName',
                                    defaultMessage: '备件分类名称'
                                })}>
                                {this.props.detail.partCategoryName}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.partCategoryCode',
                                    defaultMessage: '备件分类编号'
                                })}>
                                {this.props.detail.partCategoryCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.length',
                                    defaultMessage: '备件长度（mm）'
                                })}>
                                {this.props.detail.length}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.width',
                                    defaultMessage: '备件宽度（mm）'
                                })}>
                                {this.props.detail.width}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.height',
                                    defaultMessage: '备件高度（mm）'
                                })}>
                                {this.props.detail.height}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.netWeight',
                                    defaultMessage: '备件净重（kg）'
                                })}>
                                {this.props.detail.netWeight}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.grossWeight',
                                    defaultMessage: '备件毛重（kg）'
                                })}>
                                {this.props.detail.grossWeight}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.partReplacementCode',
                                    defaultMessage: '替代件编号'
                                })}>
                                {this.props.detail.partReplacementCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.alternativePlan',
                                    defaultMessage: '替代方案'
                                })}>
                                {this.props.detail.alternativePlan}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.supplierCode',
                                    defaultMessage: '首选供应商代码'
                                })}>
                                {this.props.detail.supplierCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.unit',
                                    defaultMessage: '计量单位'
                                })}>
                                {this.props.detail.unit}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.certificationMark',
                                    defaultMessage: '认证标识'
                                })}>
                                {this.props.detail.certificationMark}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.minPackSize',
                                    defaultMessage: '最小包装数'
                                })}>
                                {this.props.detail.minPackSize}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.minOrderQuantity',
                                    defaultMessage: '最小订购量'
                                })}>
                                {this.props.detail.minOrderQuantity}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.usagePerCar',
                                    defaultMessage: '每车用量'
                                })}>
                                {this.props.detail.usagePerCar}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.isConsume',
                                    defaultMessage: '是否消耗库存'
                                })}>
                                {this.props.detail.isConsume}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.isDecimalAllowed',
                                    defaultMessage: '是否允许小数'
                                })}>
                                {renderBoolean(this.props.detail.isDecimalAllowed)}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.overseaOnly',
                                    defaultMessage: '是否海外专用'
                                })}>
                                {renderBoolean(this.props.detail.overseaOnly)}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.shelfLife',
                                    defaultMessage: '保质期'
                                })}>
                                {this.props.detail.shelfLife}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.safeMaterial',
                                    defaultMessage: '安全件'
                                })}>
                                {this.props.detail.safeMaterial}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.packageRule',
                                    defaultMessage: '包装规则'
                                })}>
                                {this.props.detail.packageRule}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.isImported',
                                    defaultMessage: '是否进口件'
                                })}>
                                {renderBoolean(this.props.detail.isImported)}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.status',
                                    defaultMessage: '状态'
                                })}>
                                {conventEnumValueToString(baseDataStatus, this.props.detail.status)}
                            </Description>
                        </DescriptionList>
                        <DescriptionList col={1} size="large">
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'detail.info.productCategoryCode',
                                    defaultMessage: '车型编号'
                                })}>
                                {this.props.detail.productCategoryCode}
                            </Description>
                        </DescriptionList>
                        <DescriptionList col={1} size="large">
                            <Description term={this.props.intl.formatMessage({
                                id: 'detail.info.remark',
                                defaultMessage: '备注'
                            })}>
                                {this.props.detail.remark}
                            </Description>
                        </DescriptionList>
                    </Card>
                    <Card
                        title={this.props.intl.formatMessage({
                            id: 'detail.price.partServiceProperties',
                            defaultMessage: '品牌服务信息'
                        })}>
                        <Table className="white-space-nowrap" rowKey="id" columns={propertyColums} pagination={false} dataSource={partServiceProperties} {...TABLE} />
                    </Card>
                    <Card
                        title={this.props.intl.formatMessage({
                            id: 'detail.price.partServicePrices',
                            defaultMessage: '价格信息'
                        })}>
                        <Table className="white-space-nowrap" rowKey="id" columns={priceColums} pagination={false} dataSource={partServicePrices} {...TABLE} />
                    </Card>
                    <Card
                        title={this.props.intl.formatMessage({
                            id: 'detail.partDutyUnits.title',
                            defaultMessage: '备件与责任单位关系清单'
                        })}>
                        <Table className="white-space-nowrap" rowKey="dutyUnitId" columns={columns} pagination={false} dataSource={partDutyUnits} {...TABLE} />
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" disabled={this.props.loading} onClick={this.props.onCancel}>
                        {this.props.intl.formatMessage({
                            id: 'detail.btn.retrun',
                            defaultMessage: '返回'
                        })}
                    </Button>
                </div>
            </div>
        );
    }
}
Detail.propTypes = {
    detail: PropTypes.object,
    id: PropTypes.string,
    init: PropTypes.func,
    intl: PropTypes.object,
    loading: PropTypes.bool,
    permissions: PropTypes.array,
    onCancel: PropTypes.func,
    onUmount: PropTypes.func
};
import {connect} from 'react-redux';
import {
    getDetail,
    tableSearch,
    onClickBatchForDetail,
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getDetailData = selectorFactory(['page', 'domainData', 'detail', 'data']);

const mapStateToProps = (state, ownProps) => ({
    id: ownProps.id,
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching']) || state.getIn(['page', 'domainData', 'initData', 'isFetching']),
    detail: getDetailData(state),
    permissions: getPermissions(state),
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    init: () => dispatch(getDetail(ownProps.id, false)),
    onCancel: () => {
        ownProps.history.goBack();
    },
    onSelectBatch: pid =>
        dispatch(onClickBatchForDetail(ownProps.id, pid)).then(success => {
            if(success) {
                dispatch(tableSearch({
                    pageIndex: PAGE.index
                }));
                ownProps.history.push(routes.query.url());
            }
            return success;
        }),
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(injectIntl(Detail));
